<template>
	<!-- 加载控件 -->
	<view class="loading" v-show="loading">
		<div class="sk-grid">
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
			<div class="sk-grid-cube"></div>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			loading: {
				default: true
			}
		},
		data() {
			return {

			}
		},
		onLoad() {
			console.log(123)
		}
	}
</script>

<style lang="scss">
	// 加载
	.loading {
		width: 100%;
		height: 100%;
		z-index: 99999;
		position: fixed;
		top: 0;

		.sk-grid {
			position: relative;
			left: 45%;
			top: 50%;
			width: 5vh;
			height: 5vh;
			/* Cube positions
		   * 1 2 3
		   * 4 5 6
		   * 7 8 9
		   */
		}

		.sk-grid-cube {
			width: 33.33%;
			height: 33.33%;
			background-color: rgba($color: #972c22, $alpha: 0.8);
			float: left;
			animation: sk-grid 1.3s infinite ease-in-out;
		}

		.sk-grid-cube:nth-child(1) {
			animation-delay: 0.2s;
		}

		.sk-grid-cube:nth-child(2) {
			animation-delay: 0.3s;
		}

		.sk-grid-cube:nth-child(3) {
			animation-delay: 0.4s;
		}

		.sk-grid-cube:nth-child(4) {
			animation-delay: 0.1s;
		}

		.sk-grid-cube:nth-child(5) {
			animation-delay: 0.2s;
		}

		.sk-grid-cube:nth-child(6) {
			animation-delay: 0.3s;
		}

		.sk-grid-cube:nth-child(7) {
			animation-delay: 0.0s;
		}

		.sk-grid-cube:nth-child(8) {
			animation-delay: 0.1s;
		}

		.sk-grid-cube:nth-child(9) {
			animation-delay: 0.2s;
		}

		@keyframes sk-grid {

			0%,
			70%,
			100% {
				transform: scale3D(1, 1, 1);
			}

			35% {
				transform: scale3D(0, 0, 1);
			}
		}
	}
</style>
